<template>
    <el-menu router :collapse="SettingStore.isCollapse" :collapse-transition="false" :default-active="path" :mode="type">
        <el-menu-item index="/home">
            <svg-icon :style="iconsStyle" name="home-fill" />
            <template #title>
                首页
            </template>
        </el-menu-item>
        <SubMenu v-if="SystemStore.router" :data="SystemStore.router" />
    </el-menu>
</template>

<script lang='ts' setup>
import SubMenu from '@/components/Menu/menuItem/index.vue'
import { useSetting, useSystem } from '@/pinia'
import { computed } from '@vue/reactivity';
import { useRoute } from 'vue-router';
const route = useRoute()
const SettingStore = useSetting()
const SystemStore = useSystem()
interface IProps {
    type: "horizontal" | "vertical"
}
const path = computed(() => route.path)

defineProps<IProps>()

const iconsStyle = computed(() => {
    return !SettingStore.isCollapse ? {
        fontSize: "24px",
        margin: "0px 5px"
    } : {
        fontSize: "24px",
    }
})


</script>

<style lang="less" scoped>
:deep(.el-menu) {
    border-right: 0px;
    background-color: inherit !important;
}
</style>